import CommonInput from '@/pages/OrderModule/common/components/CommonInput';
import CommonInputNumber from '@/pages/OrderModule/common/components/CommonInputNumber';
import FieldWrapper from '@/pages/OrderModule/orderList/components/Filter/components/FieldWrapper';
import { ReloadOutlined, SearchOutlined } from '@ant-design/icons';
import { Button, DatePicker, Form, Input, Select } from 'antd';
import Styles from './index.module.less';
const RowWrapper = (nodes) => {
    return (<div className={Styles['seven-columns']}>
      {nodes.map((item, index) => {
            const { comp: Node, noItem, name, ...args } = item;
            if (noItem) {
                return <Node key={index}/>;
            }
            return (<Form.Item name={name} key={index} style={{ flex: 1 }}>
            <Node {...args}/>
          </Form.Item>);
        })}
    </div>);
};
const renderInputNumber = () => {
    const numberInputProps = { controls: false, min: 0, style: { backgroundColor: 'transparent', boxShadow: 'none', marginLeft: 12 } };
    return (<FieldWrapper label="采购价" childrenStyle={{ display: 'flex' }} style={{ height: 32, width: 208 }}>
      <Form.Item name="minPrice" noStyle>
        <CommonInputNumber {...numberInputProps} placeholder="最小值"/>
      </Form.Item>
      <i className="connector"/>
      <Form.Item name="maxPrice" noStyle>
        <CommonInputNumber {...numberInputProps} placeholder="最大值"/>
      </Form.Item>
    </FieldWrapper>);
};
const renderSelectAneInput = () => {
    return (<Input.Group compact>
      <Form.Item style={{ width: '45%' }} name="attributeType">
        <Select placeholder="其他属性" style={{ width: '100%' }}>
          <Select.Option value="Zhejiang">Zhejiang</Select.Option>
          <Select.Option value="Jiangsu">Jiangsu</Select.Option>
        </Select>
      </Form.Item>
      <Input style={{ width: '55%' }} placeholder="请输入"/>
    </Input.Group>);
};
const renderSelectAneDatePicker = () => {
    return (<Input.Group className={Styles['date-picker-wrapper']} compact>
      <Form.Item name="dateType" style={{ width: '25%' }}>
        <Select placeholder="时间类型" options={[
            { value: 1, label: '创建时间' },
            { value: 2, label: '修改时间' },
            { value: 3, label: '同步时间' },
        ]}/>
      </Form.Item>
      <Form.Item name="createTime" style={{ width: '75%' }}>
        <DatePicker.RangePicker />
      </Form.Item>
    </Input.Group>);
};
const GoodsFilterForm = ({ form, onFinish, collectSelectedRows, cleanFormValues }) => {
    const firstLineInput = [
        { placeholder: '请输入款式编码', comp: CommonInput, name: 'spuCode' },
        { placeholder: '请输入商品编码', comp: CommonInput, name: 'skuCode' },
        { placeholder: '请输入商品名称', comp: CommonInput, name: 'skuName' },
        { placeholder: '请输入商品简称', comp: CommonInput, name: 'skuAbbreviation' },
        { placeholder: '请输入供应商名称', comp: CommonInput, name: 'supplierName' },
        { placeholder: '请输入颜色及规格', comp: CommonInput, name: 'colorSpecifications' },
        { placeholder: '请输入供应商款式编码', comp: CommonInput, name: 'supplierSpuCode' },
    ];
    const secondLineInput = [
        { placeholder: '请输入供应商商品编码', comp: CommonInput, name: 'supplierSkuCode' },
        {
            placeholder: '请选择商品状态',
            comp: Select,
            options: [
                { value: 1, label: '已开启同步' },
                { value: 0, label: '未开启同步' },
            ],
            name: 'status',
        },
        {
            placeholder: '请选择是否仅匹配供应商',
            comp: Select,
            options: [
                { value: 1, label: '是' },
                { value: 0, label: '否' },
            ],
            name: 'isMatch',
        },
        {
            placeholder: '是否多个商品匹配',
            comp: Select,
            options: [
                { value: 1, label: '是' },
                { value: 0, label: '否' },
            ],
            name: 'isManyGoods',
        },
        {
            placeholder: '请选择商品类型',
            comp: Select,
            options: [
                { value: 1, label: '单品' },
                { value: 2, label: '组合' },
            ],
            name: 'type'
        },
        { comp: renderInputNumber, noItem: true },
        { comp: () => <div style={{ flex: 1 }}></div>, noItem: true },
    ];
    return (<Form form={form} onFinish={onFinish}>
      {RowWrapper(firstLineInput)}
      {RowWrapper(secondLineInput)}
      <div className={Styles['third-row']}>
         {renderSelectAneDatePicker()}
        <Button icon={<SearchOutlined />} type="primary" htmlType="submit" style={{ marginLeft: 16 }}>
          搜索
        </Button>
        <Button icon={<ReloadOutlined />} style={{ marginLeft: 8 }} onClick={() => {
            form.resetFields();
            onFinish && onFinish({});
        }}>
          重置
        </Button>
        <Button onClick={collectSelectedRows} type="link" style={{ marginLeft: 8 }}>
          展示已选商品
        </Button>
        <Button onClick={cleanFormValues} type="link" style={{ marginLeft: 8 }}>
          清空已选条件
        </Button>
      </div>
    </Form>);
};
export default GoodsFilterForm;
